<template>
  <div>
    <el-row>
      <el-col :span="5" style="margin-right: 40px">
        <el-card>
          <el-tabs
            v-model="activeName"
            class="demo-tabs"
            @tab-click="handleClick"
          >
            <el-tab-pane label="业务枚举" name="first" />
            <el-tab-pane label="单位枚举" name="second" />
            <el-tab-pane label="公共枚举" name="third" />
          </el-tabs>
          <el-input v-model="filterText" placeholder="Filter keyword" />
          <el-tree
            ref="treeRef"
            style="height: 635px"
            class="filter-tree"
            :data="data"
            :props="defaultProps"
            default-expand-all
            :filter-node-method="filterNode"
          />
        </el-card>
      </el-col>
      <el-col :span="18">
        <el-card style="margin-bottom: 50px">
          <el-form :model="formData" label-width="100px" :inline="true">
            <el-form-item label="枚举名称">
              <el-input v-model="formData.enumerationName" />
            </el-form-item>
            <el-form-item label="枚举编码">
              <el-input v-model="formData.enumerationCode" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary">查询</el-button>
              <el-button>重置</el-button>
            </el-form-item>
          </el-form>
        </el-card>
        <el-card>
          <pure-table
            :data="tableData"
            :columns="columns"
            @selection-change="handleSelectionChange"
            row-key="id"
            stripe
            :header-cell-style="{
              background: '#eff2fb',
              color: 'var(--el-text-color-primary)'
            }"
            style="margin-top: 30px"
          >
            <template #isUse="{ row }">
              <div v-if="row.isUse == 1">
                <div
                  style="
                    width: 36px;
                    height: 20px;
                    font-size: 12px;
                    font-weight: 400;
                    color: #3bb61b;
                    line-height: 16px;
                    border: 1px #3bb61b solid;
                    padding: 2px;
                    text-align: center;
                  "
                >
                  启用
                </div>
              </div>
              <div v-if="row.isUse == 2">
                <div
                  style="
                    width: 36px;
                    height: 20px;
                    font-size: 12px;
                    font-weight: 400;
                    color: red;
                    line-height: 16px;
                    border: 1px red solid;
                    padding: 2px;
                    text-align: center;
                  "
                >
                  停用
                </div>
              </div>
            </template>
          </pure-table>
          <el-pagination
            class="pagination"
            :current-page="listPageObj.currentPage"
            :page-size="listPageObj.pageSize"
            :page-sizes="[10, 50, 100, 200]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="listPageObj.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </el-card>
      </el-col>
    </el-row>
    <AddEnumeration :title="title" ref="addEnumeration" />
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, watch } from "vue";
import type { TabsPaneContext, ElTree } from "element-plus";
import Plus from "@iconify-icons/ep/plus";
import Delete from "@iconify-icons/ep/delete";
import EditPen from "@iconify-icons/ep/edit-pen";
import AddEnumeration from "../dialog/addEnumeration.vue";
import { ElMessage, ElMessageBox } from "element-plus";

interface Tree {
  id: number;
  label: string;
  children?: Tree[];
}
interface Table {
  id: number;
  enumerationName: string;
  enumerationCode: string;
  parentLevelEncoding: string;
  sort: number;
  isUse: number;
  isFather: number;
  affiliatedPerson: string;
  authorizationDetails: string;
}

const multipleSelection = ref([]);
const title = ref("新增常用语");
const addEnumeration = ref(null); //定义子组件
const filterText = ref("");
const treeRef = ref<InstanceType<typeof ElTree>>();
const defaultProps = {
  children: "children",
  label: "label"
};
const listPageObj = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0
});
const formData = reactive({
  enumerationName: "",
  enumerationCode: ""
});
const tableData: Table[] = [
  {
    id: 1,
    enumerationName: "阿海",
    enumerationCode: "Ahai",
    parentLevelEncoding: "xxx",
    sort: 1,
    isUse: 1,
    isFather: 1,
    affiliatedPerson: "qqq",
    authorizationDetails: "hhh"
  },
  {
    id: 2,
    enumerationName: "阿海",
    enumerationCode: "Ahai",
    parentLevelEncoding: "xxx",
    sort: 1,
    isUse: 1,
    isFather: 1,
    affiliatedPerson: "qqq",
    authorizationDetails: "hhh"
  },
  {
    id: 3,
    enumerationName: "阿海",
    enumerationCode: "Ahai",
    parentLevelEncoding: "xxx",
    sort: 1,
    isUse: 1,
    isFather: 1,
    affiliatedPerson: "qqq",
    authorizationDetails: "hhh"
  },
  {
    id: 4,
    enumerationName: "阿海",
    enumerationCode: "Ahai",
    parentLevelEncoding: "xxx",
    sort: 1,
    isUse: 1,
    isFather: 1,
    affiliatedPerson: "qqq",
    authorizationDetails: "hhh"
  },
  {
    id: 5,
    enumerationName: "阿海",
    enumerationCode: "Ahai",
    parentLevelEncoding: "xxx",
    sort: 1,
    isUse: 1,
    isFather: 1,
    affiliatedPerson: "qqq",
    authorizationDetails: "hhh"
  },
  {
    id: 6,
    enumerationName: "阿海",
    enumerationCode: "Ahai",
    parentLevelEncoding: "xxx",
    sort: 1,
    isUse: 1,
    isFather: 1,
    affiliatedPerson: "qqq",
    authorizationDetails: "hhh"
  },
  {
    id: 7,
    enumerationName: "阿海",
    enumerationCode: "Ahai",
    parentLevelEncoding: "xxx",
    sort: 1,
    isUse: 1,
    isFather: 1,
    affiliatedPerson: "qqq",
    authorizationDetails: "hhh"
  },
  {
    id: 8,
    enumerationName: "阿海",
    enumerationCode: "Ahai",
    parentLevelEncoding: "xxx",
    sort: 1,
    isUse: 1,
    isFather: 1,
    affiliatedPerson: "qqq",
    authorizationDetails: "hhh"
  },
  {
    id: 9,
    enumerationName: "阿海",
    enumerationCode: "Ahai",
    parentLevelEncoding: "xxx",
    sort: 1,
    isUse: 1,
    isFather: 1,
    affiliatedPerson: "qqq",
    authorizationDetails: "hhh"
  },
  {
    id: 10,
    enumerationName: "阿海",
    enumerationCode: "Ahai",
    parentLevelEncoding: "xxx",
    sort: 1,
    isUse: 1,
    isFather: 1,
    affiliatedPerson: "qqq",
    authorizationDetails: "hhh"
  }
];
const columns: TableColumnList = [
  {
    type: "selection",
    align: "left"
  },
  {
    label: "枚举名称",
    prop: "enumerationName"
  },
  {
    label: "枚举编码",
    prop: "enumerationCode"
  },
  {
    label: "父级编码",
    prop: "parentLevelEncoding"
  },
  {
    label: "排序号",
    prop: "sort"
  },
  {
    label: "是否启用",
    prop: "isUse",
    slot: "isUse"
  },
  {
    label: "是否父级",
    prop: "isFather"
  },
  {
    label: "所属人",
    prop: "affiliatedPerson"
  },
  {
    label: "授权明细",
    prop: "authorizationDetails"
  }
];

const activeName = ref("first");

const data: Tree[] = [
  {
    id: 1,
    label: "业务枚举",
    children: [
      {
        id: 4,
        label: "是否",
        children: [
          {
            id: 9,
            label: "年假"
          },
          {
            id: 10,
            label: "事假"
          },
          {
            id: 11,
            label: "病假"
          }
        ]
      }
    ]
  }
];
watch(filterText, val => {
  treeRef.value!.filter(val);
});
const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event);
};
const filterNode = (value: string, data: Tree) => {
  if (!value) return true;
  return data.label.includes(value);
};
const handleSelectionChange = val => {
  multipleSelection.value = val;
};
function handleSizeChange(val: number) {
  console.log(`${val} items per page`);
}
function handleCurrentChange(val: number) {
  console.log(`current page: ${val}`);
}

function handleAdd() {
  let name = null;
  if (activeName.value === "first") {
    name = "业务枚举";
  } else if (activeName.value === "second") {
    name = "单位枚举";
  } else {
    name = "公共枚举";
  }
  title.value = `新增${name}枚举`;
  addEnumeration.value.dialogVisible = true;
}

function handleEdit() {
  let name = null;
  if (activeName.value === "first") {
    name = "业务枚举";
  } else if (activeName.value === "second") {
    name = "单位枚举";
  } else {
    name = "公共枚举";
  }
  title.value = `编辑${name}枚举`;
  addEnumeration.value.dialogVisible = true;
}

const handleDelete = () => {
  if (multipleSelection.value.length == 0) {
    ElMessage({
      message: "请选择数据",
      type: "warning"
    });
  } else if (multipleSelection.value.length > 1) {
    ElMessage({
      message: "暂不支持多选",
      type: "warning"
    });
  } else {
    ElMessageBox.confirm("确定要删除枚举嘛", "Warning", {
      confirmButtonText: "确认",
      cancelButtonText: "取消",
      type: "warning"
    })
      .then(() => {
        ElMessage({
          type: "success",
          message: "删除成功"
        });
      })
      .catch(() => {
        ElMessage({
          type: "info",
          message: "取消删除"
        });
      });
  }
};
</script>

<style scoped>
.pagination {
  justify-content: flex-end !important;
  margin-top: 30px;
}
</style>
